<template>
  <div class="app-container">
    <el-card class="filter-container" shadow="never">
      <div>
        <i class="el-icon-search"></i>
        <span>筛选搜索</span>
        <el-button
          style="float: right"
          @click=""
          type="primary"
          size="small">
          查询结果
        </el-button>
        <el-button
          style="float: right;margin-right: 15px"
          @click=""
          size="small">
          重置
        </el-button>
      </div>
      <div style="margin-top: 30px">
        <el-form ref="form" :model="form" label-width="80px">
          <el-row>
            <el-col :span="8">
              <el-form-item label="输入搜索" >
                <el-input v-model="form.name"  placeholder="物品名称"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="物品品牌" >
                <el-input v-model="form.name"  placeholder="物品品牌"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="物品类别">
                <el-select v-model="form.region" placeholder="请选择物品类别">
                  <el-option v-for="item in goodsSort" :label="item.name" :value="item.id">

                  </el-option>

                </el-select>
              </el-form-item>
            </el-col>

          </el-row>
          <el-row>
            <el-col :span="8">
              <el-form-item label="审核状态">
                <el-select v-model="form.region" placeholder="全部">
                  <el-option label="区域一" value="shanghai"></el-option>
                  <el-option label="区域二" value="beijing"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>


        </el-form>
      </div>
    </el-card>
    <el-card style="margin-top: 10px">
      <i class="el-icon-tickets"></i>
      <span>数据列表</span>
      <el-button
        class="btn-add"
        @click=""
        size="mini"
        style="float: right"
        type="primary">
        添加物品
      </el-button>
    </el-card>
    <div class="table-container">
      <el-table
        ref="multipleTable"
        :data="tableData"
        tooltip-effect="dark"
        style="width: 100%"
        @selection-change="handleSelectionChange"
        border>
        <el-table-column
          type="selection"
          width="55">
        </el-table-column>
        <el-table-column
          label="封面"
          width="200">
          <template slot-scope="scope">
            <el-image
              style="width: 180px; height: 180px"
              :src="scope.row.image"
              :preview-src-list="srcList">
            </el-image>
          </template>
        </el-table-column>
        <el-table-column
          prop="name"
          label="名称"
          width="120">
        </el-table-column>
        <el-table-column
          prop="address"
          label="类别"
          show-overflow-tooltip>
        </el-table-column>
        <el-table-column
          prop="address"
          label="品牌"
          show-overflow-tooltip>
        </el-table-column>
        <el-table-column
          prop="address"
          label="价格"
          show-overflow-tooltip>
        </el-table-column>
        <el-table-column
          prop="address"
          label="浏览次数"
          show-overflow-tooltip>
        </el-table-column>
        <el-table-column
          prop="address"
          label="原始购买时间"
          show-overflow-tooltip>
        </el-table-column>
        <el-table-column
          prop="address"
          label="出售用户"
          show-overflow-tooltip>
        </el-table-column>
        <el-table-column label="操作" width="160" align="center">
          <template slot-scope="scope">
            <p>
              <el-button
                size="mini"
                @click="">查看
              </el-button>
              <el-button
                size="mini"
                @click="">编辑
              </el-button>
            </p>
            <p>
              <el-button
                size="mini"
                @click="">日志
              </el-button>
              <el-button
                size="mini"
                type="danger"
                @click="">删除
              </el-button>
            </p>
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination-container">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="1"
          :page-sizes="[5, 10, 20]"
          :page-size="5"
          layout="total, sizes, prev, pager, next, jumper"
          :total="10">
        </el-pagination>
      </div>
      <div style="margin-top: 20px">
        <el-button @click="toggleSelection([tableData[1], tableData[2]])">切换第二、第三行的选中状态</el-button>
        <el-button @click="toggleSelection()">取消选择</el-button>
      </div>
    </div>
    <div class="batch-operate-container">
      <el-select v-model="form.region" size="small" placeholder="批量操作">
        <el-option label="区域一" value="shanghai"></el-option>
        <el-option label="区域二" value="beijing"></el-option>
      </el-select>
      <el-button
        style="margin-left: 20px"
        class="search-button"
        @click="handleBatchOperate()"
        type="primary"
        size="small">
        确定执行操作
      </el-button>
    </div>

  </div>
</template>
<script>/* eslint-disable */
    export default {
        data() {
            return {
                srcList: 'https://online-edu2020.oss-cn-beijing.aliyuncs.com/2020/12/12/58268775305249b08c52601df6dd3e0f01.jpg',
                form: {
                    name: '',
                    region: '',
                    date1: '',
                    date2: '',
                    delivery: false,
                    type: [],
                    resource: '',
                    desc: ''
                },
                goodsSort:[
                  {
                  name:'家用电器',
                  id:'001',
                  children:[
                  {
                    name:'厨房用具',
                    id: '005'

                  },
                  {
                    name:'浴室用具',
                    id: '006'
                  }
                  ]
                },
                  {
                    name:'服装用品',
                    id:'002',
                    children:[
                      {
                        name:'上衣',
                        id: '007'

                      },
                      {
                        name:'裤子',
                        id: '008'
                      }
                    ]
                  }

                ],
                tableData: [{
                    image: 'https://online-edu2020.oss-cn-beijing.aliyuncs.com/2020/12/12/58268775305249b08c52601df6dd3e0f01.jpg',
                    date: '2016-05-03',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1518 弄'
                }, {
                    image: 'https://online-edu2020.oss-cn-beijing.aliyuncs.com/2020/12/12/58268775305249b08c52601df6dd3e0f01.jpg',
                    date: '2016-05-02',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1518 弄'
                }, {
                    image: 'https://online-edu2020.oss-cn-beijing.aliyuncs.com/2020/12/12/58268775305249b08c52601df6dd3e0f01.jpg',
                    date: '2016-05-04',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1518 弄'
                }, {
                    date: '2016-05-01',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1518 弄'
                }, {
                    date: '2016-05-08',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1518 弄'
                }, {
                    date: '2016-05-06',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1518 弄'
                }, {
                    date: '2016-05-07',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1518 弄'
                }],
                multipleSelection: []
            }
        },
        methods: {
            onSubmit() {
                console.log('submit!');
            },
            toggleSelection(rows) {
                if (rows) {
                    rows.forEach(row => {
                        this.$refs.multipleTable.toggleRowSelection(row);
                    });
                } else {
                    this.$refs.multipleTable.clearSelection();
                }
            },
            handleSelectionChange(val) {
                this.multipleSelection = val;
            },
            handleSizeChange(val) {
                console.log(`每页 ${val} 条`);
            },
            handleCurrentChange(val) {
                console.log(`当前页: ${val}`);
            }

        }

    }
</script>

<style></style>
